<template>
  <div>
    <a-button type="primary" @click="openAdd">新增模型</a-button>
    <a-table :dataSource="modelList" :columns="columns" rowKey="id" style="margin-top: 16px">
      <template #action="{ record }">
        <a-button type="link" @click="openEdit(record)">编辑</a-button>
        <a-popconfirm title="确定删除？" @confirm="deleteModel(record.id)">
          <a-button type="link" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="handleOk">
      <a-form :model="form" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
        <a-form-item label="模型名" name="modelName" required>
          <a-input v-model:value="form.modelName" />
        </a-form-item>
        <a-form-item label="展示名" name="displayName" required>
          <a-input v-model:value="form.displayName" />
        </a-form-item>
        <a-form-item label="API地址" name="endpoint" required>
          <a-input v-model:value="form.endpoint" />
        </a-form-item>
        <a-form-item label="API密钥" name="apiKey">
          <a-input v-model:value="form.apiKey" placeholder="如有需要请填写" />
        </a-form-item>
        <a-form-item label="类型" name="modelType">
          <a-input v-model:value="form.modelType" />
        </a-form-item>
        <a-form-item label="参数(JSON)" name="paramsJson">
          <a-textarea v-model:value="form.paramsJson" rows="4" :placeholder="'如: { \'temperature\': 0.7 }'" />
        </a-form-item>
        <a-form-item label="启用" name="enable">
          <a-switch v-model:checked="form.enable" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { aiApi } from '/@/api/business/ai/ai-api';
import { message } from 'ant-design-vue';

const modelList = ref([]);
const columns = [
  { title: '模型名', dataIndex: 'modelName' },
  { title: '展示名', dataIndex: 'displayName' },
  { title: 'API地址', dataIndex: 'endpoint' },
  { title: '类型', dataIndex: 'modelType' },
  { title: '参数', dataIndex: 'paramsJson' },
  { title: '启用', dataIndex: 'enable', customRender: ({ text }) => text ? '是' : '否' },
  { title: '操作', key: 'action', slots: { customRender: 'action' } },
];

const modalVisible = ref(false);
const modalTitle = ref('');
const form = ref({});
let editId = null;

function loadList() {
  aiApi.getModelList().then(res => {
    modelList.value = res.data || [];
  });
}

function openAdd() {
  modalTitle.value = '新增模型';
  form.value = { enable: true };
  editId = null;
  modalVisible.value = true;
}

function openEdit(record) {
  modalTitle.value = '编辑模型';
  form.value = { ...record };
  editId = record.id;
  modalVisible.value = true;
}

function handleOk() {
  if (!form.value.modelName || !form.value.displayName || !form.value.endpoint) {
    message.error('请填写必填项');
    return;
  }
  const api = editId ? aiApi.updateModel : aiApi.addModel;
  api({ ...form.value, id: editId }).then(() => {
    message.success('操作成功');
    modalVisible.value = false;
    loadList();
  });
}

function deleteModel(id) {
  aiApi.deleteModel(id).then(() => {
    message.success('删除成功');
    loadList();
  });
}

loadList();
</script> 